<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 70%;
            height: 20%;
            background: red;
            position: absolute;
            top: 0;
            left: 15%;
        }
        #sec_1{
            width: 70%;
            height: 60%;
            background: blueviolet;
            position: absolute;
            top: 20%;
            left: 15%;
        }
        #sec_2{
            width: 30%;
            height: 60%;
            background: white;
            float: left;
            position: relative;
            top: 20%;
            left: 5%;
        }
        #sec_3{
            width: 30%;
            height: 60%;
            background:white;
            float:right;
            position: relative;
            top: 20%;
            right: 5%;
        }
        footer{
            width: 70%;
            height: 20%;
            background: skyblue;
            position: absolute;
            bottom: 0;
            left: 15%;
        }
        nav{
            float: left;
            margin:30px 30px;
        }
    </style>
</head>
<body>
    <!--H5新增标签使用方法-->

    <!--header 是头部标签 可以直接代替div来使用-->
    <header>
        我是头部标签

        <!--nav 有两种用法 一种是nav直接包含a标签用来写固定的导航  另一种是nav包含ul li a 层及标签 用来写带有滚动效果的标签-->
        <nav><a href="javascript:;">我是导航</a></nav>
        <nav><a href="javascript:;">我才是导航</a></nav>
        <nav><a href="javascript:;">我真的是导航</a></nav>
        <nav><a href="javascript:;">我绝对是导航</a></nav>
    </header>

    <!--section相当于主体部分 可以代替div来使用-->
    <section id="sec_1">
        我是主体部分
        <section id="sec_2">
            我是左边的部分
            <br>
            <br>
            <!--aside是article的解释 一般都是配合article来使用 不推荐单独使用-->
            <aside>我是下面那段文字的解释？（好吧就是解释）</aside>

            <!--article是一个文章标签-->
            <article>
                <p>这是一段文字。。。。。（虽然看起来可能不太像）</p>
            </article>

            <!--figure是用来表示规定的流内容（比如图片 代码 图标等等 与dl dt dd 相似）-->
            <figure>
                <p>我这是文图说明</p>
                <p>（我本来是图片的。。。。但是没有）</p>
            </figure>
        </section>
        <section id="sec_3">
                我是右边的部分
                <br>
                <br>
                <!--meter是状态标签 此标签有5个属性 各具意义 value是代表当前的值 min是指最小的值 max是指最大的值 low是指最低的值 high是指最高的值-->
                <meter value="50" min="10" max="90" low="15" high="85"></meter>
                <br>
                <!--progress是工作完成的流程标签 与merer有异曲同工之处-->
                <progress value="50" max="100"></progress>
                <br>
                <!--datalist是一个列表标签 与summary配合使用  但是要与input配合使用 input增加list属性 detail的id属性值要与input的list的属性值相同-->
                <input type="text" list="aa">
                <datalist id="aa">
                    <option>我是第一个</option>
                    <option>我是第二个</option>
                    <option>我是第三个</option>
                </datalist>

                <!--detail也是一个列表标签 -->
                
                <br>

                <!--ruby是一个注释标签 与rt配合使用-->
                <p>只是一个<ruby>注 释<rt>zhu  shi</rt></ruby></p>
                <br>

                <!--mark是一个标记标签 包含要标记的内容后会改变表及内容的背景色-->
                <p>这是一个<mark><ruby>标记<rt>biaoji</rt></ruby></mark>标签</p>
        </section>
    </section>

    <!--footer 是尾部标签也是底部标签 也可以直接代替div来使用-->
    <footer>
        <!--contenteditable标签属性的属性值为true的时候代表本标签的内容在浏览器中是可以被修改的状态-->
        <p contenteditable="true">我是尾部标签</p> 
        <br>

        <div class="bbb" data-aaa="aaa"></div>
        <div class="123,321,mmm" id="ppp"></div>
    </footer>
    <script>
        var box=document.querySelector(".bbb");
        console.log(box)
        // getAttribute可以读取属性的属性值
        console.log(box.getAttribute('class'));
        // setAttribute可以设置（新增）一个属性和属性值；
        box.setAttribute('data_222','box222');
        console.log(box.getAttribute('data_222'));

        // dataset  只要以自定义data开头的属性 都能操作；
        // 查看
        console.log(box.dataset.aaa)
        // 更改
        box.dataset.aaa="bbb";
        console.log(box.dataset.aaa)
        // 添加
        box.dataset.bbb="ccc";
        console.log(box.dataset.bbb)

        var box2=document.querySelector("#ppp");
        console.log(box2)
        // box2.classlist.add('555');
        box.classlist.remove('123')
        console.log(box2.classlist)

    </script>
</body>
</html>